<template>
    <view class="content">
        <!-- <image src="../../static/image/logo_2.png" class="logo-2"></image> -->
        <view class="title">全民健康教育网</view>
		<view class="box">
			<view class="item">
				<image src="../../static/icon/tel.png" class="icon"></image>
				<input type="text" v-model="username" placeholder="账号" class="inp">
			</view>
			<view class="item">
				<image src="../../static/icon/pas.png" class="icon"></image>
				<input type="text" v-model="password" placeholder="密码" class="inp">
			</view>
		</view>
		<view class="btn" @click="$u.throttle(login, 500)">立即登录</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                username: '',
				password: '',
            };
        },
        onLoad() {
            
        },
        methods: {
            login() {
				if (!this.username) {
					this.$toast('账号不能为空')
					return
				}
				if (!this.password) {
					this.$toast('密码不能为空')
					return
				}
				
            	this.$ajax('staff_login', {
					username: this.username,
					password: this.password,
                }).then(ret => {
            		if (ret.status == 0) {
            			this.$setSync('userToken', ret.data.userToken)
						this.$setSync('userInfo', ret.data)
						this.$setSync('roleId', ret.data.role_id)
						
						uni.$emit('LOGIN')
						// this.$backT()
						this.$gTo(`/pages/index/index`)
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
    	background: linear-gradient(to top,#f5f5f5,#f5f5f5,#f5f5f5,#03b8b4);
    }
    .content{
    	padding: 20rpx;
    	min-height: 100vh;
    }
    .logo-2{
    	width: 103rpx;
    	height: 103rpx;
    	margin: 50rpx auto 0;
    }
    .title{
    	font-size: 38rpx;
    	font-weight: bold;
    	color: #fff;
    	text-align: center;
    	padding-top: 4rpx;
    	padding-bottom: 70rpx;
    }
	
	.box{
		padding: 0 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.item{
		padding: 45rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item:last-child{
		border-bottom: none;
	}
	.icon{
		width: 31rpx;
		height: 37rpx;
		margin-right: 13rpx;
	}
	.inp{
		flex: 1;
	}
	
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}

</style>
